<template>
    <view class="content">
        <view class="content__map">
            <image src="/static/logo.png" mode="aspectFill"></image>
        </view>
        <view class="content__warp">
            <view class="content__body">
                <view class="content__body-introduction">
                    <Card titleBarStyle="slot">
                        <template #content>
                            <view class="card__header">
                                <view class="card__header-left">
                                    <image src="/static/logo.png"></image>
                                </view>
                                <view class="card__header-right">
                                    <view class="card__header-title">
                                        #2025 年全国心理咨询师感知和判断是大脑考试报名#
                                    </view>
                                    <view class="card__header-item">
                                        <uv-icon name="clock"></uv-icon>
                                        <view class="card__header-item-name">活动时间：</view>2025-03-01 12：:0 - 2025-03-01
                                        12：00
                                    </view>
                                    <view class="card__header-item">
                                        <uv-icon name="map"></uv-icon>
                                        <view class="card__header-item-name">活动地址：</view>四川省成都市金牛区xxx
                                    </view>
                                </view>
                            </view>
                            <view class="card__body">
                                <uv-album :urls="urls" multipleSize="17vw" space="2rpx" maxCount="5"
                                    rowCount="5"></uv-album>
                                <view class="card__body-more">
                                    更多现场照片与评论>>
                                </view>
                            </view>
                        </template>
                    </Card>
                </view>
                <view class="content__body-userInfo">
                    <Card titleBarStyle="slot">
                        <template #content>
                            <view class="card__item">
                                <view class="card__item-label">姓名</view>
                                <view class="card__item-input">张三</view>
                            </view>
                            <view class="card__item">
                                <view class="card__item-label">联络电话</view>
                                <view class="card__item-input">13377772222</view>
                            </view>
                            <view class="card__item">
                                <view class="card__item-label">紧急联络电话</view>
                                <view class="card__item-input">13377772222</view>
                            </view>
                            <view class="card__item">
                                <view class="card__item-label">报名时间</view>
                                <view class="card__item-input">2025-02-09 10:40:35</view>
                            </view>
                        </template>
                    </Card>
                </view>
            </view>
        </view>
        <view class="content__footer">
            <TabBar theme="none">
                <template #bar>
                    <Mybutton title="现场签到" :transition="true" color="#fff" width="90vw" borderRadius="30rpx">
                    </Mybutton>
                </template>
            </TabBar>
        </view>
    </view>
</template>
<script lang="ts" setup>
    import Card from "@/components/Card.vue";
    import TabBar from "@/components/TabBar.vue";
    import Mybutton from "@/components/Button.vue";
    const urls = [
        'https://hao123-static.cdn.bcebos.com/cms/2025-3/1743061766144/6603de900035.png',
        'https://hao123-static.cdn.bcebos.com/cms/2025-3/1743061766144/6603de900035.png',
        'https://hao123-static.cdn.bcebos.com/cms/2025-3/1743061766144/6603de900035.png',
        'https://hao123-static.cdn.bcebos.com/cms/2025-3/1743061766144/6603de900035.png',
        'https://hao123-static.cdn.bcebos.com/cms/2025-3/1743061766144/6603de900035.png',
        'https://hao123-static.cdn.bcebos.com/cms/2025-3/1743061766144/6603de900035.png',
        'https://hao123-static.cdn.bcebos.com/cms/2025-3/1743061766144/6603de900035.png',
        'https://hao123-static.cdn.bcebos.com/cms/2025-3/1743061766144/6603de900035.png',
        'https://hao123-static.cdn.bcebos.com/cms/2025-3/1743061766144/6603de900035.png',
        'https://hao123-static.cdn.bcebos.com/cms/2025-3/1743061766144/6603de900035.png',
        'https://hao123-static.cdn.bcebos.com/cms/2025-3/1743061766144/6603de900035.png',
        'https://hao123-static.cdn.bcebos.com/cms/2025-3/1743061766144/6603de900035.png',
        'https://hao123-static.cdn.bcebos.com/cms/2025-3/1743061766144/6603de900035.png',
        'https://hao123-static.cdn.bcebos.com/cms/2025-3/1743061766144/6603de900035.png',
        'https://hao123-static.cdn.bcebos.com/cms/2025-3/1743061766144/6603de900035.png',
    ];
</script>
<style lang="scss" scoped>
    .content {
        &__map {
            height: 320rpx;
            width: 100%;
            overflow: hidden;

            image {
                width: 100%;
            }
        }

        &__warp {
            background-color: #daddfb;
            display: flex;
            flex-direction: column;
            align-items: center;
            border-radius: 30rpx 30rpx 0 0;


        }

        &__body {
            margin-top: -60rpx;
            width: 95%;

            &-card {
                margin-bottom: 15rpx;

            }

            &-introduction {
                .card__header {
                    display: flex;

                    &-left {
                        image {
                            width: 80rpx;
                            height: 80rpx;
                        }
                    }

                    &-right {
                        padding-left: 20rpx;
                    }

                    &-title {
                        font-size: 32rpx;
                        font-weight: bold;
                    }

                    &-item {
                        color: #62666e;
                        display: flex;
                        margin: 15rpx 0;
                        font-size: 22rpx;
                        align-items: center;

                        &-name {
                            color: #787b82;
                            margin: 0 10rpx;
                            width: 120rpx;
                        }
                    }



                }

                .card__body {
                    margin-top: 20rpx;

                    &-more {
                        margin-top: 20rpx;
                        background-color: #f2eeff;
                        font-size: 22rpx;
                        padding: 10rpx;
                        box-sizing: border-box;
                        text-align: center;
                        border-radius: 8rpx;
                        color: #7f72d3;
                    }
                }
            }

            &-userInfo {
                margin-top: 20rpx;
                margin-bottom: 160rpx;
            }
        }

        &__footer {
            width: 100%;
        }

    }

    .card__item {
        display: flex;
        justify-content: space-between;
        padding: 10rpx 0;

        &-label {
            color: #aaacb2;
        }

        &-input {
            color: #000;
        }
    }
</style>